<template>
  <div class="cqmap">
    <e-charts :option="option" autoresize></e-charts>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import { use, registerMap } from 'echarts/core'
import axios from 'axios'

import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'

import {
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components'

use([
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
])
export default {
  components: {
    ECharts
  },
  data () {
    return {
      path: '/cqmap.json',
      option: {}
    }
  },
  methods: {
  },
  mounted () {
    axios.get(this.path).then((res) => {
      const mapData = res.data
      registerMap('CQ', mapData)

      this.option = {
        title: {
          text: '重庆本地就业平均薪资',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 35
          },
          top: '5%'
        },
        visualMap: {
          min: 1000,
          max: 25000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (p) => {
            console.log(p)
            let val = p.value
            if (window.isNaN(val)) {
              val = 0
            }
            const txtCon = "<div style='text-align:center'> 地区：" + p.name + '<br />value值：' + p.value
            return txtCon
          }
        },

        series: [
          {
            name: '重庆本地就业平均薪资',
            type: 'map',
            mapType: 'CQ',
            label: {
              show: true
            },
            // TODO: 所需数据格式
            data: [{
              name: '渝中区',
              value: 100
            }, {
              name: '渝北区',
              value: 15000
            }, {
              name: '北碚区',
              value: 130
            }]
          }
        ]
      }
    })
  }
}
</script>

<style scoped>
  .cqmap {
    width: 100%;
    height: 100vh;
  }
</style>
